<template>
  <div class="flc pub_bgColorFFF p20">
    <div class="header flex_space_between">
      <div class="header_left flex_start">
        <label class="">应收管理</label>
        <span class="header_statistics_time ml10">统计时间：{{ nowTime }}</span>
        <el-button type="text" class="header_statistics_btn pub_button" @click="reloadData">
          <img src="@/assets/img/orderManagement/reload.png" alt="刷新" />
        </el-button>
      </div>
      <div class="header_right flex_end">
        <!-- <el-button type="text" class=" customize_btn pub_button">
          <img src="@/assets/img/orderManagement/customize.png" alt="刷新" />
          <span class="ml5">自定义</span>
        </el-button> -->
        <div class="select_date ml12">
          <el-button type="text" class="select_date_btn pub_button">
            <span>{{ generalParams.dimensionStr }}</span>
            <img src="@/assets/img/orderManagement/arrowu_down.png" alt="箭头" class="ml5" />
          </el-button>
          <ul class="select_date_list">
            <li v-for="(item, key, index) in $staticData.filterDimension" :key="index" @click="filterDimension(key)">{{ item }}</li>
          </ul>
        </div>
        <div v-if="generalParams.dimension == 5" class="ml12">
          <el-date-picker v-model="params.timeRange" :picker-options="pickerOptions2" size="small" unlink-panels type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="pub_date_picker" :clearable="false" @change="changeTime" />
        </div>
      </div>
    </div>
    <div class="dataOverview flb mt12">
      <div class="dataOverview_list wp25" style="border: 1px solid #1eb398;">
        <div class="flex_space_between">
          <label class="dataOverview_title">总应收</label>
          <el-button type="text" class="dataOverview_btn pub_button">
            <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
          </el-button>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.receivableTotal / 100 }}</span>
            <div class="flex_start mt8">
              <span class="dataOverview_trneLabel mr12">环比</span>
              <div v-if="generalData.receivableTotalQoqRate < 0" class="dataOverview_trnedDown flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_down.png" alt="上涨" />
                <span>{{ generalData.receivableTotalQoqRate.toFixed(2) }}%</span>
              </div>
              <div v-if="generalData.receivableTotalQoqRate >= 0" class="dataOverview_trnedUp flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_up.png" alt="上涨" />
                <span>+{{ generalData.receivableTotalQoqRate.toFixed(2) }}%</span>
              </div>
            </div>
          </div>
          <img src="@/assets/img/orderManagement/dataOverview_1.png" class="dataOverview_content_img mt8" alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list wp25" style="border: 1px solid #F16363;">
        <div class="flex_space_between">
          <label class="dataOverview_title">已应收</label>
          <el-button type="text" class="dataOverview_btn pub_button">
            <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
          </el-button>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.received / 100 }}</span>
            <div class="flex_start mt8">
              <span class="dataOverview_trneLabel mr12">环比</span>
              <div v-if="generalData.receivedQoqRate < 0" class="dataOverview_trnedDown flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_down.png" alt="上涨" />
                <span>{{ generalData.receivedQoqRate.toFixed(2) }}%</span>
              </div>
              <div v-if="generalData.receivedQoqRate >= 0" class="dataOverview_trnedUp flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_up.png" alt="上涨" />
                <span>+{{ generalData.receivedQoqRate.toFixed(2) }}%</span>
              </div>
            </div>
          </div>
          <img src="@/assets/img/orderManagement/dataOverview_2.png" class="dataOverview_content_img mt8" alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list wp25" style="border: 1px solid #F3A53F;">
        <div class="flex_space_between">
          <label class="dataOverview_title">待应收</label>
          <el-button type="text" class="dataOverview_btn pub_button">
            <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
          </el-button>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.receivablePending / 100 }}</span>
            <div class="flex_start mt8">
              <span class="dataOverview_trneLabel mr12">环比</span>
              <div v-if="generalData.receivablePendingQoqRate < 0" class="dataOverview_trnedDown flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_down.png" alt="上涨" />
                <span>{{ generalData.receivablePendingQoqRate.toFixed(2) }}%</span>
              </div>
              <div v-if="generalData.receivablePendingQoqRate >= 0" class="dataOverview_trnedUp flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_up.png" alt="上涨" />
                <span>+{{ generalData.receivablePendingQoqRate.toFixed(2) }}%</span>
              </div>
            </div>
          </div>
          <img src="@/assets/img/orderManagement/dataOverview_3.png" class="dataOverview_content_img mt8" alt="营收" />
        </div>
      </div>
      <div class="dataOverview_list wp25" style="border: 1px solid #3AAFE0;">
        <div class="flex_space_between">
          <label class="dataOverview_title">回款率</label>
          <el-button type="text" class="dataOverview_btn pub_button">
            <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
          </el-button>
        </div>
        <div class="flex_space_between ">
          <div class="dataOverview_content_left ">
            <span class="dataOverview_num">{{ generalData.collectionRatio.toFixed(2) }}%</span>
            <div class="flex_start mt8">
              <span class="dataOverview_trneLabel mr12">环比</span>
              <div v-if="generalData.collectionRatioQoqRate < 0" class="dataOverview_trnedDown flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_down.png" alt="上涨" />
                <span>{{ generalData.collectionRatioQoqRate.toFixed(2) }}%</span>
              </div>
              <div v-if="generalData.collectionRatioQoqRate >= 0" class="dataOverview_trnedUp flex_space_between ">
                <img src="@/assets/img/orderManagement/trend_up.png" alt="上涨" />
                <span>+{{ generalData.collectionRatioQoqRate.toFixed(2) }}%</span>
              </div>
            </div>
          </div>
          <img src="@/assets/img/orderManagement/dataOverview_4.png" class="dataOverview_content_img mt8" alt="营收" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'; // ES 2015
export default {
  data() {
    return {
      nowTime: '', //现在的时间
      params: {
        timeRange: []
      },
      generalParams: {
        //统计概览参数
        dimensionStr: '今日',
        dimension: 1 //"1"-日   "2"-月   "3"-季度    "4"-年
      },
      generalData: {
        receivableTotal: 0, //总应收
        receivableTotalQoqRate: 0, //总应收环比
        receivablePending: 0, //待应收
        receivablePendingQoqRate: 0, //待应收环比
        collectionRatio: 0, //回款率
        collectionRatioQoqRate: 0, //回款率环比
        received: 0, //已应收
        receivedQoqRate: 0 //已应收环比
      },
      maxDate: null,
      pickerOptions2: {
        onPick: range => {
          if (range && range.minDate) {
            const maxTime = range.minDate.getTime() + 730 * 24 * 60 * 60 * 1000;
            this.maxDate = new Date(maxTime);
          } else {
            this.maxDate = null;
          }
        },
        disabledDate: date => {
          // 如果没有设置maxDate，则不禁用任何日期
          if (!this.maxDate || !date) {
            return false;
          }
          // 禁用超过15天范围的日期
          return date > this.maxDate;
        }
      }
    };
  },
  created() {
    this.getNowTime();
    this.filterDimension(1);
  },
  methods: {
    //选择日期触发
    changeTime() {
      this.getStatisticsGeneral();
    },
    //刷新数据
    reloadData() {
      this.getNowTime();
      this.getStatisticsGeneral();
    },
    //获取现在的时间
    getNowTime() {
      this.nowTime = dayjs().format('YYYY-MM-DD HH:mm');
    },
    //选择维度（日、月、季度、年）
    filterDimension(type) {
      this.generalParams = {
        dimension: type,
        dimensionStr: this.$staticData.filterDimension[type]
      };
      this.params.timeRange = [];
      if (type * 1 < 5) {
        this.getStatisticsGeneral();
      }
    },
    //获取统计概览数据
    async getStatisticsGeneral() {
      let params = null;
      if (this.params.timeRange.length > 0) {
        params = { startDate: dayjs(this.params.timeRange[0]).format('YYYY-MM-DD'), endDate: dayjs(this.params.timeRange[1]).format('YYYY-MM-DD') };
      } else {
        params = {
          ...this.generalParams
        };
      }
      let res = await this.$api.post(this.$url.receivedPaymentsGeneral, params);
      for (let key in res.data) {
        res.data[key] = res.data[key] ? res.data[key] * 100 : 0;
      }
      this.generalData = res.data;
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  .header_left {
    label {
      font-size: 18px;
      color: #000000;
    }
    .header_statistics_time {
      font-weight: 400;
      font-size: 16px;
      color: #858d9d;
    }
    .header_statistics_btn {
      margin-left: 10px;
      width: 16px;
      height: 16px;
      padding: 0px;
      border: 0px;
    }
  }
  .header_right {
    .customize_btn {
      width: 94px;
    }
    .select_date_lis:hover,
    .select_date:hover .select_date_list {
      display: block;
    }
    .select_date_btn,
    .select_date {
      width: 80px;
      position: relative;
      .select_date_list {
        display: none;
        z-index: 10000;
        position: absolute;
        top: 36px;
        left: 0px;
        width: 80px;
        box-shadow: 0px 1px 2px 0px rgba(82, 88, 102, 0.06);
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #e0e2e7;
        padding-top: 4px;
        box-sizing: border-box;
        li {
          width: 100%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: #a3a9b6;
          background: #ffffff;
          cursor: pointer;
          &:hover {
            background: #f4f5f6;
            border-radius: 6px 6px 6px 6px;
            color: #667085;
          }
        }
      }
    }
  }
}
.dataOverview {
  width: 100%;
}
.dataOverview_list {
  & + .dataOverview_list {
    margin-left: 16px;
  }
  float: left;
  height: 128px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  & div {
    width: 100%;
    .dataOverview_title {
      font-size: 18px;
      font-weight: 600;
      color: #0a0b0d;
    }
    .dataOverview_btn {
      width: 32px;
      height: 32px;
      cursor: default;
    }
    .dataOverview_num {
      font-size: 24px;
      color: #0a0b0d;
      font-weight: 600;
    }
    .dataOverview_trnedDown {
      span {
        font-size: 12px;
        color: #1eb398;
      }
    }
    .dataOverview_trnedDown,
    .dataOverview_trnedUp {
      min-width: 59px;
      width: auto;
      height: 20px;
      background: #edfcf9;
      border-radius: 6px 6px 6px 6px;
      padding: 2px 4px;
      box-sizing: border-box;
      span {
        font-size: 12px;
        color: #1eb398;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    .dataOverview_trnedDown {
      background: #fef0f0;
      span {
        color: #f16363;
      }
    }
    .dataOverview_trneLabel {
      font-size: 12px;
      color: #667085;
      display: block;
    }
  }
  .dataOverview_content_img {
    width: 172px;
    height: 75px;
  }
}
</style>
